<template>
  <div class="upload-avatar-setting">
    <h2>Avatar Upload</h2>
    <el-upload
        class="avatar-upload-card"
        drag
        action=""
        accept=".jpg,.jpeg,.png"
        :show-file-list="false"
        :before-upload="beforeAvatarUpload">
      <i class="el-icon-upload" style="color: #2D8CF0;"></i>
      <div class="el-upload__text">Drop here, or click to select manually</div>
      <div class="el-upload__tip" slot="tip">Only jpg / png file can be uploaded, no more than 500kb</div>
    </el-upload>
  </div>
</template>

<script>

export default {
  name: "UploadAvatarSetting",
  methods: {
    checkFileSize: function (file) {
      if (file.size > 1024 * 1024 / 2) {
        this.$message.warning('File exceed max size limit')
        return false
      }
      return true
    },
    checkFileType: function (file) {
      if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(file.name)) {
        this.$message.warning('File type not support')
        return false
      }
      return true
    },
    beforeAvatarUpload: function (file) {
      const isOk = this.checkFileType(file) && this.checkFileSize(file)
      if (!isOk) {
        return false
      }
      const reader = new window.FileReader()
      reader.onload = (e) => {
        // this.ShowCropper = true;
        // this.imgSrc = e.target.result;
        this.$emit("imgLoaded", e.target.result);
      }
      reader.readAsDataURL(file)
      return false
    },
  }
}
</script>

<style scoped>

.upload-avatar-setting {
}

.avatar-upload-card {
}


</style>